<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>任务管理 - 蔬记</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
        :root {
            --primary-color: #2ecc71; /* 主色调：绿色（象征种植） */
            --background-color: #f8fff8; /* 页面背景色 - 淡绿色 */
        }
        
        * {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        
        body {
            background-color: var(--background-color);
        }
        
        /* 底部导航栏 */
        .tab-bar {
            border-top: 1px solid rgba(0, 0, 0, 0.08);
            background-color: white;
        }
        
        .tab-item.active {
            color: var(--primary-color);
            font-weight: 500;
        }
        
        /* 任务卡片 */
        .task-card {
            transition: all 0.3s ease;
        }
        
        .task-card:hover {
            transform: translateY(-2px);
        }
        
        /* 自定义复选框 */
        .custom-checkbox {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid #d1d5db;
            transition: all 0.2s ease;
        }
        
        .custom-checkbox.checked {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        /* 任务类型标签 */
        .task-type-tag {
            border-radius: 9999px;
            padding: 2px 10px;
            font-size: 0.75rem;
            font-weight: 500;
        }
        
        /* 任务状态筛选标签 */
        .status-filter-tag {
            transition: all 0.2s ease;
        }
        
        .status-filter-tag.active {
            background-color: var(--primary-color);
            color: white;
        }
        
        /* 紧急任务标记 */
        .urgent-badge {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0.5;
            }
            100% {
                opacity: 1;
            }
        }
        
        /* 骨架屏动画 */
        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
        
        .skeleton-loading {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
        }
    </style>
</head>
<body class="min-h-screen pb-20">
    <!-- 页面头部 -->
    <header class="sticky top-0 z-10 bg-white shadow-sm">
        <div class="px-4 py-5">
            <h1 class="text-xl font-bold text-gray-800">任务管理</h1>
            <p class="text-sm text-gray-500">完成你的种植任务，让蔬菜茁壮成长</p>
        </div>
        
        <!-- 状态筛选标签 -->
        <div class="px-4 py-3 overflow-x-auto whitespace-nowrap scrollbar-hide">
            <div class="inline-flex space-x-2">
                <button class="status-filter-tag active px-4 py-1.5 rounded-full text-sm font-medium" data-status="all">全部</button>
                <button class="status-filter-tag bg-gray-100 px-4 py-1.5 rounded-full text-sm font-medium text-gray-700" data-status="pending">待处理</button>
                <button class="status-filter-tag bg-gray-100 px-4 py-1.5 rounded-full text-sm font-medium text-gray-700" data-status="completed">已完成</button>
                <button class="status-filter-tag bg-gray-100 px-4 py-1.5 rounded-full text-sm font-medium text-gray-700" data-status="urgent">紧急</button>
            </div>
        </div>
    </header>

    <!-- 主内容区域 -->
    <main class="px-4 py-5">
        <!-- 今日任务概览 -->
        <div class="bg-gradient-to-r from-green-500 to-green-600 rounded-2xl p-5 mb-6 text-white">
            <h2 class="text-lg font-semibold mb-3">今日任务</h2>
            <div class="flex justify-between items-center">
                <div class="flex items-center space-x-1">
                    <i class="fa fa-calendar-o"></i>
                    <span id="currentDate">2023年6月15日 星期四</span>
                </div>
                <div class="flex space-x-4">
                    <div class="text-center">
                        <div class="text-2xl font-bold" id="pendingTasksCount">3</div>
                        <div class="text-xs opacity-80">待处理</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl font-bold" id="completedTasksCount">2</div>
                        <div class="text-xs opacity-80">已完成</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl font-bold" id="urgentTasksCount">1</div>
                        <div class="text-xs opacity-80">紧急</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 任务列表 -->
        <div id="taskList" class="space-y-3">
            <!-- 任务加载状态 -->
            <div id="loadingState" class="py-8 flex flex-col items-center justify-center">
                <div class="w-12 h-12 border-4 border-green-200 border-t-green-500 rounded-full animate-spin mb-4"></div>
                <p class="text-sm text-gray-500">加载任务中...</p>
            </div>
            
            <!-- 空状态提示 -->
            <div id="emptyState" class="hidden flex flex-col items-center justify-center py-12 text-center">
                <div class="w-24 h-24 rounded-full bg-green-50 flex items-center justify-center mb-4">
                    <i class="fa fa-check-square-o text-4xl text-green-400"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-800 mb-2">暂无任务</h3>
                <p class="text-sm text-gray-500 mb-6">今天没有需要完成的种植任务，好好休息一下吧！</p>
            </div>
        </div>
    </main>
    
    <script>
        // 页面加载时初始化
        window.addEventListener('load', initPage);
        
        // 初始化页面
        function initPage() {
            // 更新日期
            updateCurrentDate();
            
            // 加载任务数据
            loadTasks();
            
            // 绑定状态筛选标签事件
            bindStatusFilterEvents();
        }
        
        // 更新当前日期
        function updateCurrentDate() {
            const now = new Date();
            const options = {
                year: 'numeric',
                month: 'long',
                day: 'numeric',
                weekday: 'long'
            };
            document.getElementById('currentDate').textContent = now.toLocaleDateString('zh-CN', options);
        }
        
        // 加载任务数据
        function loadTasks() {
            const taskListContainer = document.getElementById('taskList');
            const loadingState = document.getElementById('loadingState');
            const emptyState = document.getElementById('emptyState');
            
            // 模拟加载延迟
            setTimeout(() => {
                // 从localStorage获取任务数据
                let tasksData = JSON.parse(localStorage.getItem('tasks')) || [];
                
                // 如果没有任务数据，使用模拟数据用于展示
                if (tasksData.length === 0) {
                    // 生成模拟任务数据
                    tasksData = generateMockTasks();
                    // 保存到localStorage供后续使用
                    localStorage.setItem('tasks', JSON.stringify(tasksData));
                }
                
                // 隐藏加载状态
                loadingState.style.display = 'none';
                
                // 检查是否有任务
                if (tasksData.length === 0) {
                    emptyState.classList.remove('hidden');
                    return;
                }
                
                // 隐藏空状态
                emptyState.classList.add('hidden');
                
                // 清空任务列表
                taskListContainer.innerHTML = '';
                
                // 按优先级和截止日期排序任务
                const sortedTasks = sortTasks(tasksData);
                
                // 更新统计数据
                updateTaskStats(tasksData);
                
                // 创建任务卡片
                sortedTasks.forEach(task => {
                    const taskCard = createTaskCard(task);
                    taskListContainer.appendChild(taskCard);
                });
            }, 800);
        }
        
        // 生成模拟任务数据
        function generateMockTasks() {
            const now = new Date();
            const tomorrow = new Date(now);
            tomorrow.setDate(now.getDate() + 1);
            
            // 模拟植物数据
            const plants = [
                { id: '1', name: '生菜', type: 'leaf', icon: '🥬' },
                { id: '2', name: '西红柿', type: 'fruit', icon: '🍅' },
                { id: '3', name: '胡萝卜', type: 'root', icon: '🥕' }
            ];
            
            // 模拟任务类型
            const taskTypes = [
                { type: 'water', name: '浇水', color: 'bg-blue-100 text-blue-600', icon: 'fa-tint' },
                { type: 'fertilize', name: '施肥', color: 'bg-green-100 text-green-600', icon: 'fa-pagelines' },
                { type: 'prune', name: '修剪', color: 'bg-purple-100 text-purple-600', icon: 'fa-scissors' },
                { type: 'pest', name: '病虫害防治', color: 'bg-red-100 text-red-600', icon: 'fa-bug' }
            ];
            
            // 生成任务
            const tasks = [];
            
            // 为每种植物创建1-3个任务
            plants.forEach(plant => {
                const taskCount = Math.floor(Math.random() * 3) + 1;
                
                for (let i = 0; i < taskCount; i++) {
                    const taskType = taskTypes[Math.floor(Math.random() * taskTypes.length)];
                    const isCompleted = Math.random() > 0.7;
                    const dueDate = new Date(now);
                    dueDate.setHours(23, 59, 59);
                    
                    // 随机设置一些任务的截止日期为明天
                    if (Math.random() > 0.7) {
                        dueDate.setDate(now.getDate() + 1);
                    }
                    
                    tasks.push({
                        id: `${plant.id}-${taskType.type}-${i}`,
                        title: `${taskType.name} - ${plant.name}`,
                        type: taskType.type,
                        plantId: plant.id,
                        plantName: plant.name,
                        plantIcon: plant.icon,
                        dueDate: dueDate.toISOString(),
                        completed: isCompleted,
                        urgent: Math.random() > 0.8
                    });
                }
            });
            
            return tasks;
        }
        
        // 任务排序
        function sortTasks(tasks) {
            return tasks.sort((a, b) => {
                // 紧急任务排在前面
                if (a.urgent && !b.urgent) return -1;
                if (!a.urgent && b.urgent) return 1;
                
                // 已完成的任务排在后面
                if (!a.completed && b.completed) return -1;
                if (a.completed && !b.completed) return 1;
                
                // 按截止日期排序
                return new Date(a.dueDate) - new Date(b.dueDate);
            });
        }
        
        // 更新任务统计
        function updateTaskStats(tasks) {
            const pendingTasks = tasks.filter(task => !task.completed).length;
            const completedTasks = tasks.filter(task => task.completed).length;
            const urgentTasks = tasks.filter(task => task.urgent && !task.completed).length;
            
            document.getElementById('pendingTasksCount').textContent = pendingTasks;
            document.getElementById('completedTasksCount').textContent = completedTasks;
            document.getElementById('urgentTasksCount').textContent = urgentTasks;
        }
        
        // 创建任务卡片
        function createTaskCard(task) {
            const card = document.createElement('div');
            card.className = `task-card bg-white rounded-xl shadow-sm overflow-hidden ${task.completed ? 'opacity-70' : ''}`;
            
            // 获取任务类型标签
            const taskTypeInfo = getTaskTypeInfo(task.type);
            
            // 格式化截止日期
            const formattedDueDate = formatDueDate(task.dueDate);
            
            // 判断是否是今天的任务
            const isToday = isTaskDueToday(task.dueDate);
            
            card.innerHTML = `
                <div class="p-4">
                    <div class="flex items-start space-x-3">
                        <div class="flex-shrink-0">
                            <div class="custom-checkbox ${task.completed ? 'checked' : ''}" data-task-id="${task.id}">
                                ${task.completed ? '<i class="fa fa-check text-white text-xs flex items-center justify-center h-full"></i>' : ''}
                            </div>
                        </div>
                        <div class="flex-grow">
                            <div class="flex items-center justify-between mb-1">
                                <h4 class="font-medium text-gray-800 ${task.completed ? 'line-through' : ''}">${task.title}</h4>
                                ${task.urgent && !task.completed ? '<span class="urgent-badge bg-red-100 text-red-600 text-xs px-2 py-0.5 rounded-full">紧急</span>' : ''}
                            </div>
                            <div class="flex items-center text-xs text-gray-500 mb-2">
                                <span class="flex items-center mr-3">
                                    <i class="fa fa-${taskTypeInfo.icon} mr-1"></i> ${taskTypeInfo.name}
                                </span>
                                <span class="flex items-center">
                                    <i class="fa fa-calendar-o mr-1"></i> ${formattedDueDate}
                                </span>
                            </div>
                            <div class="flex items-center">
                                <span class="task-type-tag ${taskTypeInfo.color} mr-2">${taskTypeInfo.name}</span>
                                <span class="text-xs text-gray-500">
                                    ${task.plantIcon} ${task.plantName}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            // 绑定复选框点击事件
            const checkbox = card.querySelector('.custom-checkbox');
            checkbox.addEventListener('click', function() {
                toggleTaskStatus(task.id);
            });
            
            return card;
        }
        
        // 获取任务类型信息
        function getTaskTypeInfo(type) {
            const taskTypes = {
                water: { name: '浇水', color: 'bg-blue-100 text-blue-600', icon: 'tint' },
                fertilize: { name: '施肥', color: 'bg-green-100 text-green-600', icon: 'pagelines' },
                prune: { name: '修剪', color: 'bg-purple-100 text-purple-600', icon: 'scissors' },
                pest: { name: '病虫害防治', color: 'bg-red-100 text-red-600', icon: 'bug' }
            };
            
            return taskTypes[type] || { name: '其他', color: 'bg-gray-100 text-gray-600', icon: 'question-circle' };
        }
        
        // 格式化截止日期
        function formatDueDate(dateString) {
            const date = new Date(dateString);
            const now = new Date();
            now.setHours(0, 0, 0, 0);
            
            const taskDate = new Date(date);
            taskDate.setHours(0, 0, 0, 0);
            
            const diffDays = Math.floor((taskDate - now) / (1000 * 60 * 60 * 24));
            
            if (diffDays === 0) {
                return '今天';
            } else if (diffDays === 1) {
                return '明天';
            } else if (diffDays > 1 && diffDays <= 7) {
                const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
                return `周${weekdays[date.getDay()]}`;
            } else {
                return `${date.getMonth() + 1}月${date.getDate()}日`;
            }
        }
        
        // 判断任务是否今天到期
        function isTaskDueToday(dateString) {
            const date = new Date(dateString);
            const now = new Date();
            
            return date.getDate() === now.getDate() &&
                   date.getMonth() === now.getMonth() &&
                   date.getFullYear() === now.getFullYear();
        }
        
        // 切换任务状态
        function toggleTaskStatus(taskId) {
            // 获取任务数据
            let tasksData = JSON.parse(localStorage.getItem('tasks')) || [];
            const taskIndex = tasksData.findIndex(task => task.id === taskId);
            
            if (taskIndex !== -1) {
                // 切换任务状态
                tasksData[taskIndex].completed = !tasksData[taskIndex].completed;
                
                // 保存更新后的任务数据
                localStorage.setItem('tasks', JSON.stringify(tasksData));
                
                // 重新加载任务数据以更新UI
                loadTasks();
                
                // 显示操作反馈
                showToast(tasksData[taskIndex].completed ? '任务已完成！' : '任务已重新激活');
            }
        }
        
        // 绑定状态筛选标签事件
        function bindStatusFilterEvents() {
            const filterTags = document.querySelectorAll('.status-filter-tag');
            
            filterTags.forEach(tag => {
                tag.addEventListener('click', function() {
                    // 移除所有标签的active状态
                    filterTags.forEach(t => {
                        t.classList.remove('active');
                        t.classList.add('bg-gray-100');
                        t.classList.add('text-gray-700');
                    });
                    
                    // 添加当前标签的active状态
                    this.classList.add('active');
                    this.classList.remove('bg-gray-100');
                    this.classList.remove('text-gray-700');
                    
                    // 获取选中的状态
                    const status = this.getAttribute('data-status');
                    
                    // 筛选任务
                    filterTasksByStatus(status);
                });
            });
        }
        
        // 根据状态筛选任务
        function filterTasksByStatus(status) {
            const taskListContainer = document.getElementById('taskList');
            const emptyState = document.getElementById('emptyState');
            
            // 从localStorage获取任务数据
            let tasksData = JSON.parse(localStorage.getItem('tasks')) || [];
            
            // 根据状态筛选任务
            let filteredTasks = [];
            
            switch(status) {
                case 'pending':
                    filteredTasks = tasksData.filter(task => !task.completed);
                    break;
                case 'completed':
                    filteredTasks = tasksData.filter(task => task.completed);
                    break;
                case 'urgent':
                    filteredTasks = tasksData.filter(task => task.urgent && !task.completed);
                    break;
                default:
                    // 默认显示所有任务
                    filteredTasks = tasksData;
            }
            
            // 按优先级和截止日期排序任务
            const sortedTasks = sortTasks(filteredTasks);
            
            // 清空任务列表
            taskListContainer.innerHTML = '';
            
            // 检查是否有符合条件的任务
            if (sortedTasks.length === 0) {
                emptyState.classList.remove('hidden');
                return;
            }
            
            // 隐藏空状态
            emptyState.classList.add('hidden');
            
            // 创建任务卡片
            sortedTasks.forEach(task => {
                const taskCard = createTaskCard(task);
                taskListContainer.appendChild(taskCard);
            });
        }
        
        // 显示提示消息
        function showToast(message) {
            // 检查是否已有toast元素
            let toast = document.getElementById('toast');
            
            // 如果没有，创建一个新的toast元素
            if (!toast) {
                toast = document.createElement('div');
                toast.id = 'toast';
                toast.className = 'fixed bottom-24 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg opacity-0 transition-opacity duration-300';
                document.body.appendChild(toast);
            }
            
            // 设置消息内容
            toast.textContent = message;
            
            // 显示toast
            toast.style.opacity = '1';
            
            // 2秒后自动隐藏
            setTimeout(() => {
                toast.style.opacity = '0';
            }, 2000);
        }
    </script>
    
    <!-- 底部导航Tab -->
    <nav class="tab-bar fixed bottom-0 left-0 right-0 flex items-center justify-around py-2 border-t border-gray-200 bg-white">
        <a href="home.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-home text-lg"></i>
            <span class="text-xs mt-1">首页</span>
        </a>
        <a href="growing-plants.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-leaf text-lg"></i>
            <span class="text-xs mt-1">菜园</span>
        </a>
        <a href="#" class="tab-item active flex flex-col items-center py-2 px-3 text-primary font-medium" onclick="return false;">
            <i class="fa fa-tasks text-lg"></i>
            <span class="text-xs mt-1">任务</span>
        </a>
        <a href="stats.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-bar-chart text-lg"></i>
            <span class="text-xs mt-1">统计</span>
        </a>
        <a href="profile.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-user text-lg"></i>
            <span class="text-xs mt-1">我的</span>
        </a>
    </nav>
</body>
</html>
